import Vue from 'vue'
import Component from 'vue-class-component'
import '../settingStyle.css'
import '@/modules/product/productStyle.css'
import { Toast, MessageBox} from 'mint-ui'
import OrderHandle from '@/modules/order/orderMethod.js'

@Component
export default class WantBuyDetailClass extends Vue {
  wantProduct = {}
  wantProductTitle = ''
  realPrice = '12000'
  oldPrice ='10000'
  productId = ''
  image = ''

  showCancel = true
  showPay = true
  showPayOrder = false

  deposit = 0

  created () {
    this.wrapperHeight = document.documentElement.clientHeight - 108
  }

  activated () {
    this.showCancel = true
    this.showPay = true
    this.showPayOrder = false
    this.wantProduct = {}
    this.image = ''
    this.wantProductTitle = ''
    this.productId = this.$route.params.productId
    this.getData()
  }

  mounted() {
    window.payResult = this.payResult
  }

  payResult (result) {
    if (result === 'true') {
      // Toast('支付成功')
      this.$router.go(-1)
    } else {
      // Toast('支付失败')
    }
  }

  handleHiddelButton () {
    let obj = document.getElementById('contentClass')
    if (this.wantProduct.order) {
      this.showCancel = false
      this.showPay = false
      if (this.wantProduct.order.orderStatus === 1) {
        this.showPayOrder = true
        obj.style = this.caculateHeight
      } else {
        this.showPayOrder = false
        obj.style = this.caculateSmallHeight
      }
    } else {
      this.showPayOrder = false
      if (this.wantProduct.status === 3 || this.wantProduct.status === 4 || this.wantProduct.status === 5) {
        this.showPay = false
        this.showCancel = false
        obj.style = this.caculateSmallHeight
      } else if (this.wantProduct.status === 2) {
        this.showPay = false
        this.showCancel = true
        obj.style = this.caculateHeight
      } else {
        obj.style = this.caculateHeight
      }
    }
  }

  get caculateHeight() {
    return 'height:' + String(this.wrapperHeight) + 'px'
  }

  get caculateSmallHeight() {
    return 'height:' + String(this.wrapperHeight + 44) + 'px'
  }

  async getData() {
    try {
      const response = await this.$axios.post('/demand/v1/demand/' + this.productId, {})
      if (response.status === 0) {
        this.wantProduct = response.data
        if (this.wantProduct.deposit && this.wantProduct.deposit.depositAmount > 0) {
          this.deposit = this.wantProduct.deposit.depositAmount
        }

        this.handleHiddelButton()
        let arr = JSON.parse(this.wantProduct.imageUrls)
        if (arr && arr.length > 0) {
          this.image = arr[0]
        }
        this.wantProductTitle = this.wantProduct.description ? this.wantProduct.description : ''
      }
    } catch (e) {
      console.log(e)
    }
  }

  async handleCancel() {
    MessageBox.confirm('是否取消求买订单?', '提示').then(action => {
      this.cancel()
    }).catch(err => {
      // 点击取消

      console.log(err)
    })
  }

  async cancel() {
    try {
      const response = await this.$axios.post('/demand/v1/demand/cancel', {demandId: this.productId})
      if (response.status === 0) {
        Toast('已取消')
        this.$router.go(-1)
      }
    } catch (e) {
      console.log(e)
    }
  }
  handlePay() {
    MessageBox.confirm('是否支付订金?', '提示').then(action => {
      this.pay()
    }).catch(err => {
      // 点击取消

      console.log(err)
    })
  }

  // 支付订单
  handlePayProduct () {
    this.$router.push({name: 'orderDetail', params: {orderId: this.wantProduct.order.orderNo}})
  }

  // 生成订单
  async pay() {
    try {
      const response = await this.$axios.post('/demand/v1/demand/deposit', {demandId: this.wantProduct.demandId})
      if (response.status === 0) {
        OrderHandle.handleGoPay(response.data)
      }
    } catch (e) {
      console.log(e)
    }
  }

  createOrder() {
    return <WantBuyOrderClass onCancel={this.handleCancel} onPay={this.handlePayProduct} item={this.wantProduct.order}>

          </WantBuyOrderClass>
  }

  render () {
    return (
      <div class='content'>
      <mt-header class='header' fixed title="求买详情">
        <mt-button onClick={() => { this.$router.go(-1) }} icon="" slot="left"><icon name = 'backIcon' scale='2'/></mt-button>
      </mt-header>
      <div id='contentClass' class='wantBuyDetailClass'>
        <img src={this.image}/>
        <p style='font-size:14px'>{this.wantProductTitle}</p>
        <p style='font-size:14px'>接受价格：{this.wantProduct.currency === 'RMB' ? '￥' : '€'}{this.wantProduct.acceptPrice}</p>
        <p v-show={this.deposit > 0} style='font-size:14px'>已付订金：￥{this.deposit}</p>
        <p v-show={this.wantProduct.order} style='font-size:14px;height:40px;line-height:40px;padding-left:15px;background-color:#eee'>匹配订单</p>
        <div>
          {this.wantProduct.order ? this.createOrder() : ''}
        </div>
      </div>
        <dl class = 'wantBuyDetailBottom'>
            <dd v-show={this.showCancel} onClick={this.handleCancel}>取消求买</dd>
            <dd v-show={this.showPay} onClick={this.handlePay} style='background-color:#000;color:#fff'>支付订金</dd>
            <dd v-show={this.showPayOrder} onClick={this.handlePayProduct} style='background-color:#000;color:#fff'>支付订单</dd>
        </dl>

      </div>
    )
  }
}

@Component({
  props: {
    item: Object
  }
})
class WantBuyOrderClass extends Vue {
  products = []
  cover = ''
  name = ''

  created () {
    this.products = this.item.products
    if (this.products && this.products.length > 0) {
      this.cover = this.products[0].cover
      this.name = this.products[0].productName
    }
  }

  handlerPushDetail () {
    // this.$router.push({name: 'wantBuyDetail', params: {productId: this.item.demandId}})
  }

  handleCancel () {
    this.$emit('cancel')
  }

  handlePay() {
    this.$emit('pay')
  }

  render () {
    return (
      <div>
        <p class ='addImageBottomLine' style='font-size:14px;height:40px;line-height:40px;padding-left:15px'>订单号:{this.item.orderNo}</p>
      <div class = 'wantItemStyle' onClick={this.handlerPushDetail}>
        <div class="wantItemImageClass"><img src = {this.cover}/></div>
        <div class='wantItemContentClass'>
          <p>{this.name}</p>
          <p>实际价格 :￥{this.item.amountPayable}<font style='float:right;margin-right:15px;font-size: .8em;color:#666'>{this.item.createTime}</font></p>
        </div>
      </div>
      </div>
    )
  }
}
